<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Promise</h1>


    <script>
      // 注意： js 里方法也是一个对象 js 里一切皆 对象


      function query(name){
        // 2 开始添加缓存
        const cache = query.cache || (query.cache = new Map());

        // 4 添加判断 缓存里是否有值 有就直接拿
        if(cache.has(name)){
          console.log('走缓存,拿值');
          return Promise.resolve(cache.get(name));
        }

        //1 这里的ajax 也是封装的promise 方法
        // query 方法里的内容 是 ajax 方法 所以 query 也就是个promise
        return ajax(`http://localhost:8888/php/user.php?name=${name}`).then(user=>{
          // 没走缓存 后台拿值
          // 3  开始给缓存 赋值 
          cache.set(name,user)
          console.log(cache,'cache');
          return user
        })
      };
      // 调用 query
      query('尹尚').then(user=>{
        console.log(user);
      })

      setTimeout(()=>{
        query('尹尚').then(user=>{
          console.log(user);
        })
      },1000);
      setTimeout(()=>{
        query('尹尚').then(user=>{
          console.log(user);
        })
      },1000)
      
    </script>
</body>
</html>